<template>
  <div class="newmv">
      <div class="new_mv">最新mv <i v-for="(m,index) in jsol" :key="m.id" @click="huantai(m,index,0)"  :class="{active:los==index}">{{m}}</i> <dl class="iconfont icon-xiangyoujiantou"></dl>
      </div>
      <div class="new_box" v-for="(m,index) in getnewmv[0]" :key="m.id" >
          <i class="iconfont icon-MV" v-show="lod!==m.id">{{m.playCount}}万</i>
          <img :src="`${m.cover}?param=315y175`" alt="" v-show="lod!==m.id" @click="playmdeio(m.id,index) ">
           <video :src="getmvurl"    ref='video' controls v-show="lod==m.id"></video>
            
          <div class="mv_name" >{{m.name}}</div>
          <div class="mv_artistName">{{m.artistName}}</div>
      </div>
           <div class="new_mv">推荐mv </div>
             <div class="new_box" v-for="(m,index) in getnewmv[1]" :key="m.id" >
         <i class="iconfont icon-MV" v-show="lod!==m.id">{{m.playCount}}万</i>
          <img :src="`${m.cover}?param=315y175`" alt="" v-show="lod!==m.id" @click="playmdeio(m.id,index+getnewmv[0].length) ">
           <video :src="getmvurl"    ref='video' controls v-show="lod==m.id"></video>
            
          <div class="mv_name" >{{m.name}}</div>
          <div class="mv_artistName">{{m.artistName}}</div>
      </div>
       <div class="new_mv">mv排行榜 <i v-for="(m,index) in jsol" :key="index"   @click="huantai(m,index,1)" :class="{active:lop==index}">{{m}}</i> <dl class="iconfont icon-xiangyoujiantou"></dl>
      </div>
         
                <div class="rank_mv" v-for="(m,index) in getnewmv[2] " :key="index">
                    <div class="left_math">{{index+1}}</div>
                 
                    <div class="rank_img">    <i class="iconfont icon-MV" >{{m.playCount}}万</i><img :src="`${m.cover}?param=200y110`" alt="">  </div>
                    <div class="rank_wenzi">
                               <div class="mv_name">{{m.name}}</div>
                                <div class="name">{{m.artistName}}</div>
                    </div>
                </div>
          
         <div  class="kongbai"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
     data(){
         return{
             jsol:[
                 '内地','港台','欧美','日本','韩国'
             ],
             lod:200,
             los:200,
             lop:200
         }
     },
     mounted(){
        // console.log(this.jsol);
         this.$store.dispatch('getnewmv','')
         this.$store.dispatch('getrecmv')
         this.$store.dispatch('getrankmv','')
     },
     computed:{
         ...mapState({
             getnewmv:(state)=>{
                 return state.user.getnewmv||[]
             },
             getmvurl:(state)=>{
                 return state.user.mvurl
             },
            
         })
     },
     methods:{
         huantai(m,mi,ms){
             if(ms==0){
                    this.lod=200
                this.los=mi
                 let s = 0
              this.getnewmv.forEach(item=>{
              this.$refs.video[s].pause()
              s++
                  })
                this.$store.dispatch('getnewmv',m)
             }else{
               this.lop=mi
                this.$store.dispatch('getrankmv',m)
             }
         
           
         },
    playmdeio(m,mi){
        console.log(mi);
        this.$store.dispatch('getmedio',m)
        this.lod=m
      // console.log(this.$refs);
       let s = 0
       
       this.getnewmv[0].forEach(item=>{
              this.$refs.video[s].pause()
              s++
       })
       //console.log(s);
      
           this.getnewmv[1].forEach(item=>{
              this.$refs.video[s].pause()
              s++
       })
      // console.log(ss);
       
       this.$refs.video[mi].play().catch(()=>{

       })
    },
     }
}
</script>

<style lang='less' scoped>
 .newmv{
       margin: 20px 135px;
      
      margin-right: 10px;
      
       .new_mv{
           font-size: 20px;
           font-weight: bold;
          
            i{
                cursor: pointer;
              font-size: 16px;
              margin-left: 12px;
          
               &.active{
                   color:skyblue;
                   font-weight: bold;
                   
               }
            }
            i:hover{
                   color:skyblue;
                   font-weight: bold;
            }
            .iconfont{
                cursor: pointer;
                float: right;
                margin-top: 5px;
            }
       }
       .new_box{
           position: relative;
           float: left;
           width: 315px;
           height: 175px;
         
           margin-top: 10px;
           margin-right: 30px;
           padding-bottom: 100px;
          
            video{
              cursor: pointer;
                width: 315px;
                height: 175px;

            }
             img{
              cursor: pointer;
                width: 315px;
                height: 175px;

            }
            .iconfont{
            position: absolute;
            right: 10px;
                z-index: 2;
               color: #fff;
            }
            .mv_name{
                     cursor: pointer;
                font-size: 13px;
                 text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                
            }
            .mv_name:hover{
               
                color: cadetblue;
            }
           .mv_artistName{
               cursor: pointer;
               font-size: 16px;
               color: gray;
           }
            .mv_artistName:hover{
                text-decoration: underline;
            }
       }
       .rank_mv{
         
           float: left;
           width: 677.5px;
           height: 110px;
        background-color: #f9f9f9;
           margin-top: 20px;
         margin-right: 10px;
           .left_math{
               
               float: left;
               height: 110px;
               width: 23px;
               font-size: 20px;
               line-height: 110px;
               margin-right: 4px;
               text-align: center;
               background-color: #fff;
                &.active{
                    color: skyblue;
                    font-weight: bold;
                }
           }
           .rank_img{
               position: relative;
               float: left;
                 cursor: pointer;
                 height: 110px;
                 width: 200px;
                 img{
                   
                  height: 110px;
                  width: 200px;
                 }
                .iconfont{
                     position: absolute;
                     right: 5px;
                      color: #fff;
                     z-index: 2;
                }
                 }
       .rank_wenzi{
           float: left;
           width: 440px;
           height: 110px;
         margin-left: 10px;
            .mv_name{
                width: 440px;
                  cursor: pointer;
                height: 55px;
               font-size: 16px;
                 background-color: #f9f9f9;
            }
            .name{
                margin-top: 35px;
                 width: 440px;
                height: 20px;
               cursor: pointer;
                font-size: 14px;
                line-height: 20px;
                color: gray;
                  background-color: #f9f9f9;
            }
            .mv_name:hover{
                color: skyblue;
               
            }
            .name:hover{
                 text-decoration: underline;
            }
       }
       }
      .kongbai{
          float: left;
          height: 200px;
          width: 100%;
      }
 }
</style>